<template>
    <div class="form_content">
        <el-form :model="form" label-width="auto" style="max-width: 600px">
            <el-form-item label="作业人员">
                <el-select
                    v-model="form.userName"
                    placeholder="--请选择作业人员--"
                >
                    <template v-for="(item, index) in userList">
                        <el-option :label="item.label" :value="item.value" />
                    </template>
                </el-select>
            </el-form-item>
            <el-form-item label="开始日期">
                <el-col>
                    <el-date-picker
                        v-model="form.starTime"
                        type="date"
                        placeholder="请选择开始时间"
                        style="width: 100%"
                    />
                </el-col>
            </el-form-item>
            <el-form-item label="结束日期">
                <el-col>
                    <el-date-picker
                        v-model="form.endTime"
                        type="date"
                        placeholder="请选择结束时间"
                        style="width: 100%"
                    />
                </el-col>
            </el-form-item>
            <el-form-item class="el-form-item-btn">
                <el-button type="primary" @click="onSubmit"
                    >查看作业轨迹</el-button
                >
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup lang="ts">
const emit = defineEmits(["queryToolsUserTraJectory"]);

const form = reactive({
    userName: "",
    starTime: "",
    endTime: "",
});

const userList = reactive([
    {
        label: "张三",
        value: "张三",
    },
    {
        label: "里斯",
        value: "里斯",
    },
    {
        label: "王五",
        value: "王五",
    },
    {
        label: "uiw",
        value: "uiw",
    },
]);

const onSubmit = () => {
    emit("queryToolsUserTraJectory", { dataa: "11111" });
};

onMounted(() => {});
</script>

<style lang="scss" scoped>
.form_content {
    background: #fff;
    width: 420px;
    padding: 12px;
    .el-form-item-btn {
        margin-top: 28px;
        :deep(.el-form-item__content) {
            @include flexLayout;
        }
    }
}
</style>
